<template>
  <div class="home">
    <!-- 欢迎部分 -->
    <section class="hero animate__animated animate__fadeIn">
      <div class="container">
        <h1 class="animate__animated animate__slideInDown">欢迎来到 SparkieLink</h1>
        <p class="animate__animated animate__slideInUp animate__delay-1s">智能协作与公平绩效，为教育与管理赋能。</p>
        <router-link to="/query" class="cta-button animate__animated animate__pulse animate__infinite animate__slower">开始探索</router-link>
      </div>
    </section>

    <!-- 项目介绍部分 -->
    <section class="about scroll-animated" ref="aboutSection">
      <div class="container">
        <h2>关于我们</h2>
        <p>
          SparkieLink 是一个基于人工智能技术的平台，专为团队协作与绩效评估而设计。
          我们提供智能任务分配、团队成员互选机制、实时进度跟踪和多维度评分系统，旨在解决团队合作中的常见问题。
        </p>
      </div>
    </section>

    <!-- 功能亮点部分 -->
    <section class="features scroll-animated" ref="featuresSection">
      <div class="container">
        <h2 class="animate__animated animate__fadeIn animate__delay-1s">平台核心功能</h2>
        <div class="feature-list">
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-tasks"></i>
            </div>
            <h3>智能任务分配</h3>
            <p>基于团队成员的能力、偏好和任务需求，实现高效协作与资源优化。</p>
            <div class="feature-hover-effect"></div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-users"></i>
            </div>
            <h3>团队成员互选机制</h3>
            <p>基于历史数据和同伴反馈，优化团队动态，提升协作体验。</p>
            <div class="feature-hover-effect"></div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>实时进度追踪</h3>
            <p>一站式工作流跟踪功能，确保任务按时完成，过程透明。</p>
            <div class="feature-hover-effect"></div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-star"></i>
            </div>
            <h3>智能评分系统</h3>
            <p>通过数据驱动的方式，提供公平和客观的绩效评估。</p>
            <div class="feature-hover-effect"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 部分 -->
    <section class="cta scroll-animated" ref="ctaSection">
      <div class="container">
        <h2 class="animate__animated animate__fadeIn">立即加入 SparkieLink</h2>
        <p class="animate__animated animate__fadeIn animate__delay-1s">体验智能协作的力量，让您的团队更加高效、透明。</p>
        <router-link to="/login" class="cta-button animate__animated animate__heartBeat animate__delay-2s">注册账号</router-link>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 创建对各个部分的引用
const aboutSection = ref(null);
const featuresSection = ref(null);
const ctaSection = ref(null);

// 监听滚动事件，添加动画
onMounted(() => {
  // 创建一个Intersection Observer来检测元素是否在视口中
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 }); // 当元素有10%进入视口时触发

  // 观察所有带有scroll-animated类的元素
  document.querySelectorAll('.scroll-animated').forEach(el => {
    observer.observe(el);
  });
});
</script>

<style scoped>
/* 全局布局 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 英雄部分 */
.hero {
  text-align: center;
  background: linear-gradient(90deg, #3b82f6, #2563eb) !important; /* 改为更鲜明的蓝色渐变 */
  color: white;
  padding: 50px 20px;
  border-radius: 10px; /* 增加圆角，现代感更强 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.hero h1 {
  font-size: 2.8rem; /* 调整字体大小 */
  font-weight: 700;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #f97316; /* 改为橙色强调 */
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px; /* 更圆滑的按钮 */
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #fb923c; /* 更深的橙色 */
  transform: scale(1.05); /* 增加缩放动画效果 */
}

/* 关于部分 */
.about {
  padding: 50px 20px;
  background-color: #f4f8fb; /* 更清晰的背景色 */
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #3b82f6;
}

.about p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
}

/* 功能亮点部分 */
.features {
  padding: 50px 20px;
  text-align: center;
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #2563eb; /* 主色调蓝色 */
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.feature-item {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1 1 calc(50% - 40px);
  max-width: calc(50% - 40px);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 15px;
  transition: transform 0.5s ease;
}

.feature-item:hover .feature-icon {
  transform: scale(1.2) rotate(10deg);
}

.feature-hover-effect {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

.feature-item:hover .feature-hover-effect {
  transform: scaleX(1);
}

.feature-item h3 {
  font-size: 1.5rem;
  color: #3b82f6;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* CTA 部分 */
.cta {
  padding: 50px 20px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  color: white;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.cta p {
  font-size: 1.2rem;
  margin-bottom: 25px;
}

.cta .cta-button {
  padding: 12px 24px;
  background-color: #f97316;
  color: white;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cta .cta-button:hover {
  background-color: #fb923c;
  transform: scale(1.05);
}
</style>